<script setup lang="ts">
import ItemWrap from "@/components/item-wrap";
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
import { companyKapian } from "@/api/daping/index.js";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const data = ref([]);
const getData = () => {
  companyKapian()
  .then((res) => {
      console.log("公司卡片1", res.data.results);
      if (res.data) {
        data.value = res.data.results;
        console.log("公司卡片2", data.value[0]);
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
getData();
</script>

<template>
  <div class="index-box">
    <div class="contetn_left">
      <!-- <div class="pagetab">
        <div class="item">实时监测</div>
        <div class="item">统计分析</div>
      </div> -->
      
        <ItemWrap class="contetn_left-top contetn_lr-item" title="公司卡片" style="width:30%;height:30%" v-for="item in data" :key="item.company_id">
          <LeftTop :data="item" />
        </ItemWrap>
                    
      
      
      
      
      
     </div>
     
    <div class="contetn_right" style="padding: 0px 10px 16px 10px">
     
      <ItemWrap
        class="contetn_left-top contetn_lr-item "
        title="公司巡检次数排名"
        style="padding: 10px 10px 16px 10px"
      >
        <RightCenter />
      </ItemWrap>
      
    </div>
  </div>
</template>

<style scoped lang="scss">

.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
  overflow: hidden;
}
//左边 右边 结构一样
.contetn_left{
  display: flex;
  flex-direction: row; /* 从左到右 */
  overflow-y: scroll;
  
  //flex-direction: column;
  //justify-content: space-around;
  position: relative;
  width: 70%;
  height:100%;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 50px; /* 元素之间的间距 */
  // 隐藏滚动条
    -ms-overflow-style: none; // IE 10+
    overflow: -moz-scrollbars-none; // Firefox
    &::-webkit-scrollbar { width: 0 !important } // chrome 和Safari
    //scrollbar-width: none; 
}

.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 30%;
  box-sizing: border-box;
  flex-shrink: 0;
  
}
.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 100%;
}
</style>
